<template>
  <div v-loading="loading">
    <ARow class="enter-x">
      <ACol :span="24">
        <Card class="card-brief" >
          <div :class="`${prefixCls}-account-detail`">
            <Tabs 
              v-model:activeKey="activeKey" 
              :destroy-inactive-tab-pane="true" 
              :tabBarGutter="20" :tabBarStyle="tabBarStyle" 
              @change="handleChange" animated
            >
              <TabPane class="m-2" v-for="(item, index) in getTabList" :tab="item.name" :key="item.type">
                <MyAlert
                  type="success" v-if="item.tips && item.tips != ''"
                  style="margin-bottom: 10px; margin-top: -5px"
                  :message="item.tips"
                />
                <ARow class="enter-x">
                   <ACol :sm="24" :md="24" :lg="18" :xl="18" style=" margin: auto">
                      <component :is="item.component" :type="item.type" />
                   </ACol>
                </ARow>
        
              </TabPane>
            </Tabs>
          </div>
        </Card>
      </ACol>
    </ARow>

  </div>
</template>
<script lang="ts" setup>
  import { ref, useAttrs, onMounted, computed } from "vue"
  import { Space, Upload, Avatar, Tabs, TabPane } from "ant-design-vue"
  import { useDesign } from "/@/hooks/web/useDesign"
  import PasswordPolicy from "./passwordPolicy/form.vue"
  import { useMessage } from "/@/hooks/web/useMessage"
  import MyAlert from "/@/components/My/MyAlert.vue"

  import { useRoute, useRouter } from "vue-router"
  import { Card, Col, Row } from "ant-design-vue"

  const ACol = Col
  const ARow = Row
  const emit = defineEmits(["success", "register"])
  const attrs = useAttrs()
  const { prefixCls } = useDesign("security")
  const loading = ref(false)
  const activeKey = ref<string>()
  const tabBarStyle = ref({
    marginTop: "-10px",
  })

  const { createMessage } = useMessage()

  const allTabList : any[] = [
    {
      type: 'passwordPolicy',
      name: "密码策略",
      width: '70%',
      tips: [
        "系统密码相关策略，例如密码最小长度、密码中同一字符连续出现的最大次数、密码不能与历史密码相同，",
        "保证用户在修改密码时，新密码都是满足密码策略的复杂程度高的强密码。",
        "注意：密码策略只针对当前企业的所有自定义应用生效",
      ],
      component: PasswordPolicy,
    }
  ]

  const getTabList = computed(() => {
    if (!activeKey.value) {
      activeKey.value = allTabList[0].type
    }
    return allTabList;
  })

  const handleChange = (value) => {
    console.log(value)
  }

  onMounted(async () => {
    
  })

</script>

<style lang="less">
  @prefix-cls: ~"@{namespace}-security";

  .@{prefix-cls} {


  }
</style>
